<div class="quota">
  <div class="quota-title">运营管控指标</div>
  <div class="quota-tab">
    <ion-segment [(ngModel)]="segmentSelected">
      <ion-segment-button value="warn">
        预警指标
      </ion-segment-button>
      <ion-segment-button value="business">
        业务运营指标
      </ion-segment-button>
    </ion-segment>
    <div class="quota-content" [ngSwitch]="segmentSelected">
      <div *ngSwitchCase="'warn'" class="warn">
        <ion-row>
          <ion-col col-4>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yujinghong"></use>
            </svg>
          </ion-col>
          <ion-col col-8>
            <p><span>67</span><em>小时</em></p>
            <p>业扩全流程时长平均值(高压)</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yujinghong"></use>
            </svg>
          </ion-col>
          <ion-col col-8>
            <p><span>21800</span><em> 万千瓦时</em></p>
            <p>可再生能源弃电量</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yujinghong"></use>
            </svg>
          </ion-col>
          <ion-col col-8>
            <p><span>21800</span><em> 万千瓦时</em></p>
            <p>可再生能源弃电量</p>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yujingcheng"></use>
            </svg>
          </ion-col>
          <ion-col col-8>
            <p class="active"><span>21800</span><em> 万千瓦时</em></p>
            <p>可再生能源弃电量</p>
          </ion-col>
        </ion-row>
      </div>
      <div *ngSwitchCase="'business'" class="business">
        <ion-row>
          <ion-col col-4>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dianwangfazhan"></use>
            </svg>
            <p>电网发展</p>
          </ion-col>
          <ion-col col-8>
            <div>
              <p>
                <span>5.23</span>
                <em>万千米</em>
                <i></i>
                <span>5%</span>
              </p>
              <p>线路长度</p>
            </div>
            <div>
              <p>
                <span>8.9</span>
                <em>亿千伏安</em>
                <i></i>
                <span>5%</span>
              </p>
              <p>变电容量</p>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-kehuquanfangweifuwu"></use>
            </svg>
            <p>客户全方位服务</p>
          </ion-col>
          <ion-col col-8>
            <div>
              <p>
                <span>5.23</span>
                <em>万千米</em>
                <i></i>
                <span>5%</span>
              </p>
              <p>线路长度</p>
            </div>
            <div>
              <p>
                <span>5.23</span>
                <em>万千米</em>
                <i></i>
                <span>5%</span>
              </p>
              <p>线路长度</p>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diannengliangquanguocheng"></use>
            </svg>
            <p>电能量全过程管理</p>
          </ion-col>
          <ion-col col-8>
            <div>
              <p>
                <span>5.23</span>
                <em>万千米</em>
                <i class="down"></i>
                <span>5%</span>
              </p>
              <p>线路长度</p>
            </div>
            <div>
              <p>
                <span>5.23</span>
                <em>万千米</em>
                <i>
                </i>
                <span>5%</span>
              </p>
              <p>线路长度</p>
            </div>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-4>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jingzhengxingyewufazhan"></use>
            </svg>
            <p>竞争性业务发展</p>
          </ion-col>
          <ion-col col-8>
            <div>
              <p>
                <span>5.23</span>
                <em>万千米</em>
                <i>
                </i>
                <span>5%</span>
              </p>
              <p>线路长度</p>
            </div>
            <div>
              <p>
                <span>5.23</span>
                <em>万千米</em>
                <i class="down">
                </i>
                <span>5%</span>
              </p>
              <p>线路长度</p>
            </div>
          </ion-col>
        </ion-row>
      </div>
    </div>
  </div>
</div>
